<template>
  <Card>
    <div style="height:280px;width:100%;backgrond:red;" ref="domRef"></div>
  </Card>
</template>
<script>
import { getVolDataList } from "@/api";
function getData(arr, num) {
  let res = {},
    otherArr = arr.filter(t => t.type === num);
  if (otherArr.length > 0) {
    res.value = otherArr.map(t => t.value);
    res.name = otherArr.map(t => t.des)[0];
  } else {
    res.value = [];
    res.name = null;
  }
  return res;
}
export default {
  props: ["id", "companyId", "deviceId"],
  watch: {
    id(newValue, value) {
      if (newValue !== value) {
        this.init();
      }
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      const vm = this;
      if (!vm.deviceId) return;
      // 探测器电流图 9 开头的
      if (vm.deviceId.startsWith(9)) {
        this._printTanCeQiTemperatureCharts();
      } else {
        this._printUsualTemperatureCharts();
      }
    },

    _printTanCeQiTemperatureCharts() {
      let vm = this;
      let deviceId = vm.id;
      let moment = vm.moment;
      let params = {
        deviceId
      };
      let options = {
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: []
        },
        grid: {
          left: "4%",
          right: "4%",
          bottom: 10,
          containLabel: true
        },
        color: [
          "#60acfc",
          "#32d3eb",
          "#5bc49f",
          "#feb64d",
          "#ff7c7c",
          "#9287e7",
          "#668ED6",
          "#B55CBD"
        ],
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: []
        },
        yAxis: {
          name: "℃",
          type: "value"
        },
        series: []
      };

      getVolDataList(params).then(res => {
        if (res.code != 200) return false;
        if (res.data.length == 0) {
          vm.$nextTick(() => {
            vm.chartRight = vm.echarts.init(vm.$refs["domRef"]);
            vm.chartRight.showLoading({
              text: "加载中ing"
            });
            vm.chartRight.clear();
            vm.chartRight.setOption(
              {
                title: {
                  text: "暂无数据",
                  textStyle: {
                    fontWeight: "bold",
                    fontSize: 28
                  },
                  left: "center",
                  top: "center"
                }
              },
              true
            );
            vm.chartRight.hideLoading();
          });
          return false;
        }

        let resData = res.data;

        let d1 = getData(resData, 201),
          d2 = getData(resData, 202),
          d3 = getData(resData, 203),
          d4 = getData(resData, 204),
          d5 = getData(resData, 205),
          d6 = getData(resData, 206),
          d7 = getData(resData, 207),
          d8 = getData(resData, 208);
        if (d1.value.length > 0) {
          let ser1 = {
            name: d1.name,
            type: "line",
            smooth: true,
            data: d1.value
          };
          options.series.push(ser1);
          options.legend.data.push(d1.name);
          let time = res.data
            .filter(t => t.type === 201)
            .map(t => {
              return moment(t.createdAt).format("HH:mm");
            });
          options.xAxis.data = time;
        }

        if (d2.value.length > 0) {
          let ser2 = {
            name: d2.name,
            type: "line",
            smooth: true,
            data: d2.value
          };
          options.series.push(ser2);
          options.legend.data.push(d2.name);
          let time = res.data
            .filter(t => t.type === 202)
            .map(t => {
              return moment(t.createdAt).format("HH:mm");
            });
          options.xAxis.data = time;
        }

        if (d3.value.length > 0) {
          let ser3 = {
            name: d3.name,
            type: "line",
            smooth: true,
            data: d3.value
          };
          options.series.push(ser3);
          options.legend.data.push(d3.name);
          let time = res.data
            .filter(t => t.type === 203)
            .map(t => {
              return moment(t.createdAt).format("HH:mm");
            });
          options.xAxis.data = time;
        }

        if (d4.value.length > 0) {
          let ser4 = {
            name: d4.name,
            type: "line",
            smooth: true,
            data: d4.value
          };
          options.series.push(ser4);
          options.legend.data.push(d4.name);
          let time = res.data
            .filter(t => t.type === 204)
            .map(t => {
              return moment(t.createdAt).format("HH:mm");
            });
          options.xAxis.data = time;
        }

        if (d5.value.length > 0) {
          let ser5 = {
            name: d5.name,
            type: "line",
            smooth: true,
            data: d5.value
          };
          options.series.push(ser5);
          options.legend.data.push(d5.name);
          let time = res.data
            .filter(t => t.type === 205)
            .map(t => {
              return moment(t.createdAt).format("HH:mm");
            });
          options.xAxis.data = time;
        }

        if (d6.value.length > 0) {
          let ser6 = {
            name: d6.name,
            type: "line",
            smooth: true,
            data: d6.value
          };
          options.series.push(ser6);
          options.legend.data.push(d6.name);
          let time = res.data
            .filter(t => t.type === 206)
            .map(t => {
              return moment(t.createdAt).format("HH:mm");
            });
          options.xAxis.data = time;
        }

        if (d7.value.length > 0) {
          let ser7 = {
            name: d7.name,
            type: "line",
            smooth: true,
            data: d7.value
          };
          options.series.push(ser7);
          options.legend.data.push(d7.name);
          let time = res.data
            .filter(t => t.type === 207)
            .map(t => {
              return moment(t.createdAt).format("HH:mm");
            });
          options.xAxis.data = time;
        }

        if (d8.value.length > 0) {
          let ser8 = {
            name: d8.name,
            type: "line",
            smooth: true,
            data: d8.value
          };
          options.series.push(ser8);
          options.legend.data.push(d8.name);
          let time = res.data
            .filter(t => t.type === 208)
            .map(t => {
              return moment(t.createdAt).format("HH:mm");
            });
          options.xAxis.data = time;
        }

        vm.$nextTick(() => {
          vm.chartRight = vm.echarts.init(vm.$refs["domRef"]);
          vm.chartRight.showLoading({
            text: "加载中ing"
          });
          vm.chartRight.clear();
          vm.chartRight.setOption(options);
          vm.chartRight.hideLoading();
        });
      });
    },

    // 普通设备 即device不是以9开始的 温度图
    _printUsualTemperatureCharts() {
      const vm = this;
      const deviceId = vm.id;
      const moment = vm.moment;
      const params = { deviceId };
      const options = {
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: []
        },
        color: [
          "#60acfc",
          "#32d3eb",
          "#5bc49f",
          "#feb64d",
          "#ff7c7c",
          "#9287e7",
          "#668ED6",
          "#B55CBD"
        ],
        grid: {
          left: "4%",
          right: "4%",
          bottom: 10,
          containLabel: true
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: []
        },
        yAxis: {
          type: "value"
        },
        series: []
      };

      getVolDataList(params).then(res => {
        if (res.code !== 200 || res.data.length === 0) {
          vm.$nextTick(() => {
            vm.chartRight = vm.echarts.init(vm.$refs["domRef"]);
            vm.chartRight.showLoading({
              text: "加载中ing"
            });
            vm.chartRight.clear();
            vm.chartRight.setOption(
              {
                title: {
                  text: "暂无数据",
                  textStyle: {
                    fontWeight: "bold",
                    fontSize: 28
                  },
                  left: "center",
                  top: "center"
                }
              },
              true
            );
            vm.chartRight.hideLoading();
          });
          return false;
        }

        let ser1 = {
          name: "第1路温度(℃)",
          type: "line",
          smooth: true,
          data: res.data
            .filter(t => t.type === 5)
            .map(t => t.value)
            .map(t => {
              if (t === "0.0") {
                return 0;
              }
              return t;
            })
        };

        let ser2 = {
          name: "第2路温度(℃)",
          type: "line",
          smooth: true,
          data: res.data
            .filter(t => t.type === 6)
            .map(t => t.value)
            .map(t => {
              if (t === "0.0") {
                return 0;
              }
              return t;
            })
        };

        let ser3 = {
          name: "第3路温度(℃)",
          type: "line",
          smooth: true,
          data: res.data
            .filter(t => t.type === 7)
            .map(t => t.value)
            .map(t => {
              if (t === "0.0") {
                return 0;
              }
              return t;
            })
        };

        let ser4 = {
          name: "第4路温度(℃)",
          type: "line",
          smooth: true,
          data: res.data
            .filter(t => t.type === 8)
            .map(t => t.value)
            .map(t => {
              if (t === "0.0") {
                return 0;
              }
              return t;
            })
        };

        if (ser1.data && ser1.data.length > 0) {
          options.series.push(ser1);
          options.legend.data.push("第1路温度(℃)");
        }

        if (ser2.data && ser2.data.length > 0) {
          options.series.push(ser2);
          options.legend.data.push("第2路温度(℃)");
        }

        if (ser3.data && ser3.data.length > 0) {
          options.series.push(ser3);
          options.legend.data.push("第3路温度(℃)");
        }

        if (ser4.data && ser4.data.length > 0) {
          options.series.push(ser4);
          options.legend.data.push("第4路温度(℃)");
        }

        if (res.data && res.data.length > 0) {
          const type = res.data[0].type;
          options.xAxis.data = res.data
            .filter(t => t.type === type)
            .map(t => {
              return moment(t.createdAt).format("HH:mm");
            });
        }
        vm.$nextTick(() => {
          vm.chartRight = vm.echarts.init(vm.$refs["domRef"]);
          vm.chartRight.showLoading({
            text: "加载中ing"
          });
          vm.chartRight.clear();
          vm.chartRight.setOption(options, true);
          vm.chartRight.hideLoading();
        });
      });
    }
  }
};
</script>
